<template>
  <div class="table-wrap">
    <div class="table-search flex flex-row">
      <div class="search-wrap">
        <div class="item-wrap">
          <div class="search-item">
            <span class="search-item-prefix">账号查询</span>
            <Input placeholder="输入关键词查询" v-model:value="pageRequest.search!.keywords" allowClear></Input>
          </div>
          <div class="search-item">
            <span class="search-item-prefix">账号状态</span>
            <Select v-model:value="pageRequest.search!.state" placeholder="请选择状态" allowClear style="width: 200px;">
              <Option v-for="item in AdminUserState" :key="item.value" :value="item.value">{{ item.label }} </Option>
            </Select>
          </div>
        </div>
        <div class="search-btn">
          <Button type="primary" class="!flex flex-row items-center" @click="getAccountList">
            <template #icon>
              <SearchOutlined class="!flex" />
            </template>查询
          </Button>
          <Button type="default" @click="handleReset">重置</Button>
        </div>
      </div>
    </div>
    <div class="table-content">
      <div class="table-add-btn">
        <span>共{{ accountDatasource && accountDatasource.count }}个账号</span>
        <Button type="primary" @click="handleAdd" class="!flex flex-row items-center">
          <template #icon>
            <PlusOutlined class="!flex" />
          </template>添加账号</Button>
      </div>
      <Table :columns="pageColumns" :data-source="accountDatasource && accountDatasource.items" :pagination="{
        pageSize: pageRequest.page!.pageSize,
        total: accountDatasource?.count,
        pageSizeOptions: pageSizeOptions,
        showSizeChanger: true,
      }" row-key="id" :loading="loading" @change="onChange">
        <template #bodyCell="{ column, record }">

          <template v-if="column.key === 'mobile'">
            <div> {{ formatPhoneNumberStrict(record.mobile) }} </div>
          </template>

          <template v-if="column.key === 'loginTime'">
            <span>{{ convertTime(record.loginTime, 'YYYY-MM-DD HH:mm') }}</span>
          </template>
          <template v-if="column.key === 'loginIp'">
            <span>{{ record.loginIp ?? '--' }}</span>
          </template>

          <template v-if="column.key === 'state'">
            <span>{{AdminUserState.filter((v: any) => v.value === record.state)[0].label}}</span>
          </template>

          <template v-if="column.key === 'action'">
            <Button class="!px-0 !mr-6" type="link" @click="editUser(record)">编辑</Button>
            <Popconfirm title="删除无法恢复, 确定删除吗?" ok-text="确认" cancel-text="取消" @confirm="handleDel(record.id)">
              <Button class="!px-0" type="link" danger>删除</Button>
            </Popconfirm>
          </template>

        </template>
      </Table>
    </div>
    <AddAccountModal ref="addRef" @ok="getAccountList" />
  </div>
</template>

<script lang="ts" setup name="AccountIndex">
import { ref } from 'vue'
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { pageColumns, AdminUserState } from './index'
import { Input, Select, Button, Table, Popconfirm, message } from 'ant-design-vue'
import AddAccountModal from './addAccountModal.vue'
import { AdminUserApi, AdminUserRequestPageSearchRequest, AdminUserResult, AdminUserResultPageListModel } from '@/api'
import { formatPhoneNumberStrict, convertTime } from '@/utils/queryConversion'

const { Option } = Select;

const loading = ref(false)
const pageRequest = reactive<AdminUserRequestPageSearchRequest>({
  page: {
    pageIndex: 1,
    pageSize: 20,
  },
  search: {},
  sort: {
    field: '',
    reverse: true,
  },
});
const pageSizeOptions = ref<string[]>(['5', '10', '20', '50', '100']);
const accountDatasource = ref<AdminUserResultPageListModel>()
// 添加账号
const addRef = ref();

function handleReset() {
  pageRequest.search = {
    keywords: undefined,
    state: undefined,
  }
  getAccountList();
}
const getAccountList = async () => {
  loading.value = true;
  try {
    let res = await AdminUserApi.adminuserAdminusers(pageRequest);
    accountDatasource.value = res;
  } catch (error) {

  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  getAccountList();
})


// 添加账号
function handleAdd() {
  addRef.value.handleOpen();
}

const editUser = (user: AdminUserResult) => {
  addRef.value.handleOpen(user);
}

const handleDel = async (id: string) => {
  console.log('删除用户:', id)
  loading.value = true;
  try {

    await AdminUserApi.adminuserAdmindelete(id);
    message.success('删除成功')
    getAccountList()
  } catch (error) {

  } finally {
    loading.value = false;
  }
}

function onChange(pagination: any, filters: any, sorter: any) {
  pageRequest.page!.pageIndex = pagination.current;
  pageRequest.page!.pageSize = pagination.pageSize;

  pageRequest.sort!.field = sorter.order ? sorter.field : '';
  pageRequest.sort!.reverse = sorter.order == 'descend';
  getAccountList();
}
</script>

<style lang="less" scoped></style>